<template>
  <QueryBase @onSearch="doQuery" @onAdd="handleAdd">
    <template #search>
      <el-form :inline="true" :model="queryForm">
        <el-form-item :label="t('专题名称')">
          <el-input v-model="queryForm.name" placeholder="请输入" clearable v-enter="doQuery" />
        </el-form-item>
        <el-form-item :label="t('专题分类')">
          <el-select
            v-model="queryForm.categoryId"
            :placeholder="t('请选择')"
            style="width: 200px"
            clearable
          >
            <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <el-table :data="tableData" :border="true" header-row-class-name="table-header" height="60vh">
      <el-table-column prop="name" :label="t('名称')" width="180" />
      <el-table-column prop="categoryText" :label="t('分类')" width="180" />
      <el-table-column prop="desc" :label="t('介绍')">
        <template #default="scope">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="scope.row.description"
            placement="top-start"
          >
            <span>{{ showDesc(scope.row.description) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="originImg" :label="t('封面')" width="120">
        <template #default="scope">
          <v-image
            :src="scope.row.originImg"
            :style="{ width: '65px', height: '65px' }"
            :disabled="true"
          ></v-image>
        </template>
      </el-table-column>
      <el-table-column :label="t('操作')" width="240">
        <template #default="scope" v-if="action('edit')">
          <div style="display: flex">
            <el-button type="text" @click="handleModify(scope.row)">修改</el-button>
            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="topic-result-pn">
      <VPageNavigation
        :total="total"
        @on-size-changed="handleSizeChange"
        @on-page-changed="handleCurrentChange"
      >
      </VPageNavigation>
    </div>
  </QueryBase>
  <TopicEditor
    @onSubmited="
      (data) => {
        doQuery()
      }
    "
    v-model:show="showEditor"
    :mode="mode"
    :data="editModel"
  >
  </TopicEditor>
</template>
<script setup lang="ts">
import { Ref, onMounted, reactive, ref, watch } from 'vue'
import { t } from '@/common/locale'
import { queryList, deleteBy } from '@/api/topic'
import { getCategoryOptions } from '@/api/category'
import { Sysinfo } from '@/common/config'
import elHelper from '@/common/elHelper'
import TopicEditor from '@/components/topic/TopicEditor.vue'
import QueryBase from '@/components/layout/QueryBase.vue'
import VPageNavigation from '@/components/other/VPageNavigation.vue'
import { action } from '@/common/actionHelper'

const queryForm: TopicQueryForm = reactive({
  name: '',
  categoryId: ''
})
const page = ref(1)
const pageSize = ref(Sysinfo.PageSize)
const pageOptions = reactive(Sysinfo.PageSizeOptions)
const tableData: Ref<TopicDataModel[]> = ref([])
const total = ref(0)
const topicPN = ref()
const mode = ref('add')
const editModel: TopicDataModel = reactive({})
const showEditor = ref(false)
const categoryOptions: Ref<CategorySelectOption[]> = ref([])

const showDesc = (val: string) => {
  if (val && val.length > 50) {
    return val.substring(0, 50) + '...'
  } else {
    return val
  }
}

const doQuery = async () => {
  if (!action('view')) {
    elHelper.showErrorMsg('权限不足')
    return
  }
  const loading = elHelper.showLoading()
  const re = await queryList({
    name: queryForm.name,
    categoryId: queryForm.categoryId,
    pageSize: pageSize.value,
    to: page.value
  })
  if (re.isSuccess) {
    let list = re.data || []
    list.forEach((item) => {
      const opt = categoryOptions.value.find((w) => w.value === item.categoryId)
      item.categoryText = opt?.label || ''
    })
    tableData.value = list
    total.value = re.totalRow || 0
    page.value = re.pageNum || 1
  } else {
    elHelper.showErrorMsg(re.msg)
  }
  elHelper.closeLoading(loading)
}

const handleSizeChange = (val: number) => {
  pageSize.value = val
  doQuery()
}
const handleCurrentChange = (val: number) => {
  page.value = val
  doQuery()
}
const handleAdd = () => {
  editModel.categoryId = ''
  editModel.description = ''
  editModel.objectId = ''
  editModel.name = ''
  editModel.originImg = ''
  editModel.thumbImg = ''
  mode.value = 'add'
  showEditor.value = true
}
const handleModify = (data: TopicDataModel) => {
  Object.assign(editModel, data)
  mode.value = 'modify'
  showEditor.value = true
}
const handleDelete = async (data: TopicDataModel) => {
  if (!(await elHelper.showConfirmMsg('确定要删除吗?(删除后将无法恢复)'))) return
  let loading = elHelper.showLoading()
  const re = await deleteBy(data)
  if (re.isSuccess) {
    elHelper.showSuccessMsg('操作成功')
    await doQuery()
  } else {
    elHelper.showErrorMsg(re.msg)
  }
  elHelper.closeLoading(loading)
}
onMounted(async () => {
  const l = await getCategoryOptions('TOPIC')
  categoryOptions.value = l
  doQuery()
})
</script>
<style scoped lang="scss">
.topic-result-pn {
  padding-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>
